Cards

Cards are used to apply a container around a related grouping of information.

Basedev ready

Preview

Code

<div class="slds-card">
  <div class="slds-card__header slds-grid">
    <div class="slds-media slds-media--center slds-has-flexi-truncate">
      <div class="slds-media__figure">
        <svg aria-hidden="true" class="slds-icon slds-icon-standard-contact slds-icon--small">
          <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#contact"></use>
        </svg>
      </div>
      <div class="slds-media__body">
        <h2 class="slds-text-heading--small slds-truncate">Card Header (2)</h2>
      </div>
    </div>
    <div class="slds-no-flex">
      <div class="slds-button-group">
        <button class="slds-button slds-button--neutral slds-button--small">Button</button>
        <button class="slds-button slds-button--icon-border-filled slds-toggle-visibility">
          <svg aria-hidden="true" class="slds-button__icon">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
          </svg>
          <span class="slds-assistive-text">Show More</span>
        </button>
      </div>
    </div>
  </div>
  <div class="slds-card__body">
    <table class="slds-table slds-table--bordered slds-max-medium-table--stacked-horizontal slds-no-row-hover">
      <thead>
        <tr>
          <th class="slds-text-heading--label slds-size--1-of-4" scope="col">Name</th>
          <th class="slds-text-heading--label slds-size--1-of-4" scope="col">Company</th>
          <th class="slds-text-heading--label slds-size--1-of-4" scope="col">Title</th>
          <th class="slds-text-heading--label slds-size--1-of-4" scope="col">Email</th>
          <th class="row-action" scope="col">
            <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small">
              <svg aria-hidden="true" class="slds-button__icon slds-button__icon--hint slds-button__icon--small">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
              </svg>
              <span class="slds-assistive-text">Show More</span>
            </button>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr class="slds-hint-parent">
          <td class="slds-size--1-of-4" data-label="Name">Adam Choi</td>
          <td class="slds-size--1-of-4" data-label="Company">Company One</td>
          <td class="slds-size--1-of-4" data-label="Title">Director of Operations</td>
          <td class="slds-size--1-of-4" data-label="Email">adam@company.com</td>
          <td>
            <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small">
              <svg aria-hidden="true" class="slds-button__icon slds-button__icon--hint slds-button__icon--small">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
              </svg>
              <span class="slds-assistive-text">Show More</span>
            </button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="slds-card__footer"><a href="#">View All <span class="slds-assistive-text">entity type</span></a></div>
</div>

Compactdev ready

Preview

Code

<div class="slds-card">
  <div class="slds-card__header slds-grid">
    <div class="slds-media slds-media--center slds-has-flexi-truncate">
      <div class="slds-media__figure">
        <svg aria-hidden="true" class="slds-icon slds-icon-standard-contact slds-icon--small">
          <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#contact"></use>
        </svg>
      </div>
      <div class="slds-media__body">
        <h2 class="slds-text-heading--small slds-truncate">Card Header (2)</h2>
      </div>
    </div>
    <div class="slds-no-flex">
      <button class="slds-button slds-button--icon-border-filled">
        <svg aria-hidden="true" class="slds-button__icon">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
        </svg>
        <span class="slds-assistive-text">Useful alt text</span>
      </button>
    </div>
  </div>
  <div class="slds-card__body">
    <ul>
      <li class="slds-tile slds-hint-parent">
        <div class="slds-grid slds-grid--align-spread slds-has-flexi-truncate">
          <p class="slds-tile__title slds-truncate"><a href="#">Adam Choi</a></p>
          <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small slds-shrink-none">
            <svg aria-hidden="true" class="slds-button__icon slds-button__icon--hint slds-button__icon--small">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
            </svg>
            <span class="slds-assistive-text">Show More</span>
          </button>
        </div>
        <div class="slds-tile__detail">
          <dl class="slds-dl--horizontal slds-text-body--small">
            <dt class="slds-dl--horizontal__label">
              <p class="slds-truncate">Title:</p>
            </dt>
            <dd class="slds-dl--horizontal__detail slds-tile__meta">
              <p class="slds-truncate">VP, Facilities</p>
            </dd>
            <dt class="slds-dl--horizontal__label">
              <p class="slds-truncate">Email:</p>
            </dt>
            <dd class="slds-dl--horizontal__detail slds-tile__meta">
              <p class="slds-truncate">achoi@burlingtion.com</p>
            </dd>
          </dl>
        </div>
      </li>
      <li class="slds-tile slds-hint-parent">
        <div class="slds-grid slds-grid--align-spread slds-has-flexi-truncate">
          <p class="slds-tile__title slds-truncate"><a href="#">Adam Choi</a></p>
          <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small slds-shrink-none">
            <svg aria-hidden="true" class="slds-button__icon slds-button__icon--hint slds-button__icon--small">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
            </svg>
            <span class="slds-assistive-text">Show More</span>
          </button>
        </div>
        <div class="slds-tile__detail">
          <dl class="slds-dl--horizontal slds-text-body--small">
            <dt class="slds-dl--horizontal__label">
              <p class="slds-truncate">Title:</p>
            </dt>
            <dd class="slds-dl--horizontal__detail slds-tile__meta">
              <p class="slds-truncate">VP, Facilities</p>
            </dd>
            <dt class="slds-dl--horizontal__label">
              <p class="slds-truncate">Email:</p>
            </dt>
            <dd class="slds-dl--horizontal__detail slds-tile__meta">
              <p class="slds-truncate">achoi@burlingtion.com</p>
            </dd>
          </dl>
        </div>
      </li>
      <li class="slds-tile slds-hint-parent">
        <div class="slds-grid slds-grid--align-spread slds-has-flexi-truncate">
          <p class="slds-tile__title slds-truncate"><a href="#">Adam Choi</a></p>
          <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small slds-shrink-none">
            <svg aria-hidden="true" class="slds-button__icon slds-button__icon--hint slds-button__icon--small">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
            </svg>
            <span class="slds-assistive-text">Show More</span>
          </button>
        </div>
        <div class="slds-tile__detail">
          <dl class="slds-dl--horizontal slds-text-body--small">
            <dt class="slds-dl--horizontal__label">
              <p class="slds-truncate">Title:</p>
            </dt>
            <dd class="slds-dl--horizontal__detail slds-tile__meta">
              <p class="slds-truncate">VP, Facilities</p>
            </dd>
            <dt class="slds-dl--horizontal__label">
              <p class="slds-truncate">Email:</p>
            </dt>
            <dd class="slds-dl--horizontal__detail slds-tile__meta">
              <p class="slds-truncate">achoi@burlingtion.com</p>
            </dd>
          </dl>
        </div>
      </li>
    </ul>
  </div>
  <div class="slds-card__footer"><a href="#">View All <span class="slds-assistive-text">entity type</span></a></div>
</div>

Emptydev ready

Preview

Code

<div class="slds-card">
  <div class="slds-card__header slds-grid grid--flex-spread">
    <h2 class="slds-text-heading--small slds-truncate">Card Header</h2>
  </div>
  <div class="slds-card__body slds-p-horizontal--small">
    <div class="slds-text-align--center">
      <h3 class="slds-text-heading--small slds-p-top--large slds-p-bottom--large">No Related Contacts</h3>
      <button class="slds-button slds-button--neutral slds-button--small slds-m-bottom--x-large">Add Contact</button>
    </div>
  </div>
</div>

Component Overview

To initialize a card, apply the .slds-card class to a containing <div>. A card is made up of three sections, a header, a body, and a footer. The card header will get the .slds-card__header class. The card body will get the .slds-card__body class. The card footer will get the .slds-card__footer class.

The card body can consume either a Data Table or a Tile.

For available classes and options, see the card overview legend below.

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to this component.
Class NameUsage
.slds-card
Applied to:

<div>

Outcome:

Initializes card

Required:

Required

Comments:

--

.slds-card__header
Applied to:

<div>

Outcome:

Initializes card header

Required:

Required

Comments:

--

.slds-card__body
Applied to:

<div>

Outcome:

Initializes card body

Required:

Required

Comments:

--

.slds-card__footer
Applied to:

<div>

Outcome:

Initializes card footer

Required:

Required

Comments:

--

.slds-grid
Applied to:

.slds-card__header

Outcome:

Horizontally aligns text and actions on separate ends of card header

Required:

No, optional element or modifier

Comments:

Only required if you have actions